<template>
	<view class="container">
		<swiper
			class="swiper"
			:interval="3000"
			:duration="1000"
			:current="currentIndex"
			@change="changeSwiper"
			:style="{ height: '100vh' }"
		>
			<swiper-item v-for="(item, index) in memberList" :key="index">
				<view class="" style="width: 100%; height: 270rpx; background-color: #292e53"></view>
				<view class="scrollitem">
					<view class="box">
						<view class="posi">当前等级</view>
						<view class="name">
							{{ item.name }}
						</view>
						<view class="name-text">有效期至：永久有效</view>

						<view class="bottom">
							<view class="one">当前升级进度50%</view>
							<view class="two">满1000元升至黄金会员</view>
						</view>
						<view class="line">
							<u-line-progress
								:percentage="50"
								height="8"
								:showText="false"
								activeColor="#292E53"
								c
							></u-line-progress>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="image-list">
						<u-grid :border="false" col="4">
							<u-grid-item
								v-for="(item1, index1) in 5"
								:key="index1"
								customStyle="margin-bottom: 20rpx"
							>
								<view class="image-icon" ></view>
								<text class="grid-text2">急速客服</text>
							</u-grid-item>
						</u-grid>
						
					</view>

					<view class="repored">
						<view class="first">
							<view class="title">消费权益</view>
							<view class="con">
								本店线上小程序下单享
								<text>“99.5折”</text>
								优惠
							</view>
						</view>
						<view class="first">
							<view class="title">如何升级</view>
							<view class="con">开通会员需授权手机号 <text @click="show=true" style="color:#292e53">点我开通</text></view>
						</view>
						<view class="first"> 
							<view class="title">如何升级</view>
							<view class="con">可以申请开通推荐功能，获取产品分销利润  <text  @click="goPath()" style="color:#292e53">点击申请</text></view>
						</view>
						
						<u-popup :show="show"  mode='center' round="15" :safeAreaInsetBottom='false'>
						            <view style="padding:60rpx 40rpx;">
						                <view>授权手机号自动成为会员，是否授权？</view>
										<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-top: 60rpx;">
											<button class="contactBtn" style="color: #000;" @click="show=false">取消</button>
											<button class="contactBtn" :style="{'background':templateConfig.page.themeColor}" open-type="getPhoneNumber" @getphonenumber="getBindWechatPhoneTap">授权</button>
										</view>
						            </view>
								</u-popup>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		searchUserInfoById,
		getWeChartUserPhone,
		updateUserInfo 
	} from '../../../static/utils/api.js';
export default {
	data() {
		return {
			show:false,
			templateConfig: uni.getStorageSync('templateConfig'),
			memberList: [
				{
					name: '白银会员',
					text: '未到达该等级',
					icon: 'gift'
				},
				{
					name: '黄金会员',
					text: '未到达该等级',
					icon: 'gift'
				},
				{
					name: '钻石会员',
					text: '未到达该等级',
					icon: 'gift'
				}
			]
		};
	},
	onLoad() {
		
		
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: '青铜会员'
		});
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#fef8ef',
			animation: {
				duration: 400,
				timingFunc: 'easeIn'
			}
		});
	},
	methods: {
		
		getBindWechatPhoneTap(e) {
			uni.showLoading({
				title: '授权中',
				mask: true
			});
			let wechatServerJSON = {
				code: e.detail.code
			};
			let data = {
				wechatServerJSON: JSON.stringify(wechatServerJSON)
			};
			getWeChartUserPhone(data).then((res) => {
				if (res.code == 200) {
					console.log(res.body);
					this.userInfo.mobile = res.body.phone_info.purePhoneNumber;
					updateUserInfo({mobile:this.userInfo.mobile}).then(ues => {
						if (ues.code == 200) {
							uni.hideLoading();
							uni.showToast({
								title: '授权成功'
							});
							this.show=false
						}
					});
				}
			});
		},
		goPath(){
			uni.navigateTo({
				url: '/packageA/user/distribution/applyFor'
				
			});
		}
		
	}
};
</script>

<style lang="scss" scoped>
	.contactBtn {
		width: 200rpx;
		border: none;
		font-size: 30rpx;
		padding: 0rpx;
		color: #fff;
	}
.swiper {
	position: relative;
}
.scrollitem {
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 60rpx;
	.box {
		width: 670rpx;
		height: 360rpx;
		background: linear-gradient(254deg, #7ba3de 0%, #dae3f2 93%);
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		position: relative;
		.posi {
			position: absolute;
			top: 0;
			right: 0;
			width: 164rpx;
			height: 52rpx;
			border-radius: 0 20rpx 0 20rpx;
			line-height: 52rpx;
			text-align: center;
			color: #fff;
			background: #3d597d;
		}
		.name {
			font-family: Source Han Sans;
			font-size: 40rpx;
			font-weight: 700;
		}
		.name-text {
			font-size: 28rpx;
			margin: 28rpx 0 84rpx;
		}

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.one {
				font-size: 24rpx;
				font-weight: 500;
				color: #273953;
			}

			.two {
				font-size: 24rpx;
				font-weight: 500;
				color: #273953;
			}
		}
		.line {
			width: 100%;
			margin-bottom: 32rpx;
		}
	}
}
.content {
	padding: 190rpx 20rpx 0;
	
	.image-list{
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		border-radius: 20rpx;
		.image-icon{
			background-color:#CFDBEF ;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
	}
	
	.repored{
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.first {
			margin-bottom: 40rpx;
			.title {
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 350;
				color: rgba(0, 0, 0, 0.9);
				margin-bottom: 32rpx;
			}
			.con {
				font-size: 24rpx;
				font-weight: normal;
				color: rgba(0, 0, 0, 0.4);
			}
		}
	}
	
}
</style>
